<template>
  <view :style="{paddingBottom: safeBottom + 'px'}">
    <TnNavbar customBack fixed :center="false" bg-color="transparent">
      <view class="tn-pl-sm tn-pr-xs tn-flex items-center justify-between" style="height: 100%;position: relative">
        <view slot="back" class='tn-custom-nav-bar__back'>
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
        <input
            style="
               border: 1px solid #eee;
               height: 65rpx;
               border-radius: 65rpx;
               width: 100%;
               padding-left: 50rpx;
               color: #fff;
            "
            placeholder="请输入搜索内容"
            confirm-type="search"
            @confirm="search"
            v-model="where.def_name"
            placeholder-style="color: #fff;"
        >
        <tn-icon
            name="search" color="#fff"
            style="position: absolute;left: 34rpx; top: 50%; transform: translateY(-50%)"
        ></tn-icon>
      </view>
    </TnNavbar>
    <view class="bg-contaniner tn-blue_bg"></view>
    <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" @scrolltolower="loadMore">
      <view class="flex padding-tb">
        <view
            v-for="item in list"
            :key="item.id"
            class="tn-ml-sm"
            style="border-radius: 100%;position: relative"
            @click="changeElf(item)"
        >
          <image
              :src="item.head_img"
              style="width: 70px;height: 70px"
          />
          <TnIcon
              v-if="current && current.id === item.id && !current.new_race"
              name="success-circle"
              style="position: absolute;right: 0; bottom: 0"
              bold
              size="40"
              color="#e54d42"
          />
          <view style="position:absolute; bottom: 0; right: 0" v-if="current && current.new_race && current.id === item.id">
            <view style="position:relative;width: 50rpx;height: 50rpx;">
              <image src="/static/ability/shenyu.png" style="width: 50rpx;height: 50rpx"></image>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="tn-m-sm tn-radius" style="overflow: hidden;" v-if="current">
      <view class="tn-p-sm tn-blue-light_bg tn-text-bold tn-flex">
        <view class="flex align-center justify-between">
          <text>LV</text>
          <input
              type="number"
              placeholder="等级"
              v-model.number="form.lv"
              @blur="() => {
                if(form.lv > 100) {
                  form.lv = 100
                }else if(form.lv < 1) {
                  form.lv = 1
                }
              }"
              style="border: 1px solid #fff; padding: 0 5px;border-radius: 5px;height: 30px;width: 70%">
        </view>
        <view class="margin-lr-xs flex align-center justify-between">
          <text>个体</text>
          <input
              type="number"
              placeholder="个体值"
              v-model.number="form.talent"
              @blur="() => {
                if(form.talent > 31) {
                  form.talent = 31
                }else if(form.talent < 0) {
                  form.talent = 0
                }
              }"
              style="border: 1px solid #fff; padding: 0 5px;border-radius: 5px;height: 30px;width: 70%">
        </view>
        <view @click="showPopup = true" class="flex align-center justify-between">
          <text>性格</text>
          <input
              disabled
              :value="form.character.name"
              placeholder="性格"
              style="border: 1px solid #fff; padding: 0 5px;border-radius: 5px;height: 30px;width: 70%">
        </view>
      </view>
      <view class="tn-p-sm tn-blue-light_bg tn-text-bold">
        <view class="tn-flex">
          <view class="flex align-center justify-between">
            <TnCheckbox v-model="isYear" border active-color="#3d7eff" :custom-style="{border: '1px solid #3d7eff'}">年费
            </TnCheckbox>
          </view>
          <view class="flex align-center justify-between  margin-lr">
            <TnCheckbox v-model="isAchievement" border active-color="#3d7eff" :custom-style="{border: '1px solid #3d7eff'}">
              称号
            </TnCheckbox>
          </view>
          <view class="flex align-center justify-between tag" @click="chooseAchievement">
            <text>选择称号</text>
          </view>
        </view>
        <view class="article-shadow tn-m" v-if="isAchievement && achievement">
          <view class="tn-flex">
            <view class="tn-m-sm tn-pt-xs flex" style="width: 100%;">
              <view style="width: 100%">
                <view class="tn-text-lg tn-text-bold tn-flex items-center">
                  <view
                      class="margin-right"
                      style="width: 30px; height: 30px;background-position: center;background-repeat: no-repeat; background-size: cover"
                      :style="{backgroundImage:
                    `url(${achievement.icon_url})`}"></view>
                  <text>{{ achievement.am_title }}</text>
                </view>
                <view class="tn-pt-xs tn-pb-xs">
                  <text class="text-gray" user-select>
                    {{ achievement.am_desc }}
                  </text>
                </view>
                <view style="border-top: 1px solid #aaa;"></view>
                <view class="tn-pt-xs tn-pb-xs flex flex-direction justify-center" style="min-height: 100rpx;">
                  <template v-if="achievement.am_abtext">
                    <view class="text-green text-lg margin-bottom-xs">
                      属性称号效果:
                    </view>
                    <text class="tn-text-sm" user-select>
                      {{ achievement.am_abtext }}
                    </text>
                  </template>
                  <template v-else>
                    <view class="text-green text-lg text-center">
                      纪念称号无效果
                    </view>
                  </template>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="flex align-center padding-tb-sm">
          <text>称号无加成</text>
        </view>
        <view class="tn-flex">
          <view class="flex align-center justify-between">
            <TnCheckbox v-model="isTeam" border active-color="#3d7eff" :custom-style="{border: '1px solid #3d7eff'}">
              战队
            </TnCheckbox>
          </view>
          <view class="flex align-center justify-between margin-lr">
            <TnCheckbox v-model="isMintmark" border active-color="#3d7eff" :custom-style="{border: '1px solid #3d7eff'}">
              刻印
            </TnCheckbox>
          </view>
          <view class="flex align-center justify-between tag" @click="chooseMintmark">
            <text>选择刻印</text>
          </view>
        </view>
        <view class="padding " v-if="isMintmark && mintmark">
          <view class="flex justify-between">
            <view
                class="flex align-center justify-center"
                style="width: 80px;height: 80px;background-color: #182f4d;position: relative;border-radius: 5px"
                v-for="(item, index) in mintmark"
            >
              <image
                  :src="item.url"
                  style="width: 60px;height: 60px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)"
              />
            </view>
          </view>
          <view class="flex align-center padding-tb-sm" v-if="isMintmark && mintmark">
            <text>攻击+{{ mintmarkSum.atk }}, 防御+{{ mintmarkSum.def }}, 特攻+{{ mintmarkSum.sp_atk }},
              特防+{{ mintmarkSum.sp_def }},
              速度+{{ mintmarkSum.speed }}, 体力+{{ mintmarkSum.hp }}
            </text>
          </view>
        </view>
        <view class="flex align-center padding-tb-sm" v-else>
          <text>刻印无加成</text>
        </view>
        <view class="flex justify-between">
          <view class="flex-sub">
            <view class="tn-flex">
              <view class="flex align-center justify-between">
                <TnCheckbox v-model="isSuit" border active-color="#3d7eff" :custom-style="{border: '1px solid #3d7eff'}">
                  套装
                </TnCheckbox>
              </view>
              <view class="flex align-center justify-between tag margin-left-sm" @click="chooseSuit">
                <text>选择套装</text>
              </view>
            </view>
            <scroll-view scroll-y style="max-height: 250px" v-if="isSuit && suit">
              <view class="padding">
                <view class="tn-p-sm tn-flex tn-flex-column justify-center items-center">
                  <view
                      :style="{backgroundImage: `url(${suit.image})`}"
                      style="background-size: cover;background-repeat: no-repeat;width: 100px;height: 100px;background-position: center"
                  >
                  </view>
                  <view class="tn-text-center">
                    <text class="tn-text-ellipsis-1">{{ suit.name }}</text>
                  </view>
                </view>
                <view class="flex align-center padding-bottom-sm">
                  <text v-if="suit.spare_part">{{ suit.spare_part[0].desc }}</text>
                  <text v-else>套装无加成</text>
                </view>
              </view>
            </scroll-view>
            <view class="text-center padding-top-sm " v-else>
              <text>套装无加成</text>
            </view>
          </view>
          <view style="width: 1px" class="tn-border-dashed tn-border-right"></view>
          <view class="flex-sub flex flex-direction align-end">
            <view class="tn-flex">
              <view class="flex align-center justify-between">
                <TnCheckbox v-model="isSpareParts" border active-color="#3d7eff" :custom-style="{border: '1px solid #3d7eff'}">
                  面部
                </TnCheckbox>
              </view>
              <view class="flex align-center justify-between tag margin-left-sm" @click="chooseSpareParts">
                <text>选择面部</text>
              </view>
            </view>
            <scroll-view scroll-y style="max-height: 250px" v-if="isSpareParts && spareParts">
              <view class="padding">
                <view class="tn-p-sm tn-flex tn-flex-column justify-center items-center">
                  <view
                      :style="{backgroundImage: `url(${spareParts.image})`}"
                      style="background-size: contain;background-repeat: no-repeat;width: 50px;height: 50px;background-position:
                       center"
                  >
                  </view>
                  <view class="tn-text-center">
                    <text class="tn-text-ellipsis-1">{{ spareParts.name }}</text>
                  </view>
                </view>
                <view class="flex align-center padding-bottom-sm">
                  {{ spareParts.desc }}
                </view>
              </view>
            </scroll-view>
            <view class="padding-top-sm text-center" style="width: 100%" v-else>
              <text>面部无加成</text>
            </view>
          </view>
        </view>

        <view class="flex align-center justify-end padding-top-sm" v-if="from">
          <button class="bg-blue cu-btn" @click="save">完成</button>
        </view>
      </view>
      <view
          class="border-left border-bottom border-right"
          style="color: #fff"
      >
        <view class="flex align-center justify-center padding-tb-sm">
          <text>剩余学习力 {{ residueStudy }}</text>
          <view class="flex align-center justify-between margin-lr-xs">
            <TnCheckbox v-model="isPower" border active-color="#e54d42" :custom-style="{border: '1px solid #fff'}">
              体力上限+20
            </TnCheckbox>
          </view>
        </view>
        <view style="width: 100%">
          <view class="tn-flex align-center">
            <view class="tn-p-sm flex justify-center flex-sub">能力</view>
            <view class="tn-p-sm flex justify-center flex-sub">种族值</view>
            <view class="flex justify-center flex-sub">学习力</view>
            <view class="tn-p-sm flex justify-center flex-sub">能力值</view>
          </view>
          <view class="tn-flex align-center">
            <view class="tn-p-sm flex justify-center flex-sub">体力</view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ current.hp }}</view>
            <view class="flex justify-center flex-sub">
              <input @blur="checkStudy('hp')" v-model.number="studyRecord.hp" type="number" style="border: 1px solid #fff;
              padding: 0 5px;border-radius:
              5px;">
            </view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ ability.hp }}</view>
          </view>
          <view class="tn-flex align-center">
            <view class="tn-p-sm flex justify-center flex-sub">攻击</view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ current.atk }}</view>
            <view class="flex justify-center flex-sub">
              <input @blur="checkStudy('atk')" v-model.number="studyRecord.atk" type="number"
                     style="border: 1px solid #fff; padding: 0 5px;border-radius: 5px;">
            </view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ ability.atk }}</view>
          </view>
          <view class="tn-flex align-center">
            <view class="tn-p-sm flex justify-center flex-sub">防御</view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ current.def }}</view>
            <view class="flex justify-center flex-sub">
              <input @blur="checkStudy('des')" v-model.number="studyRecord.des" type="number"
                     style="border: 1px solid #fff; padding: 0 5px;border-radius: 5px;">
            </view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ ability.des }}</view>
          </view>
          <view class="tn-flex align-center">
            <view class="tn-p-sm flex justify-center flex-sub">特攻</view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ current.sp_atk }}</view>
            <view class="flex justify-center flex-sub">
              <input @blur="checkStudy('special_attack')" v-model.number="studyRecord.special_attack" type="number"
                     style="border: 1px solid #fff; padding: 0 5px;border-radius: 5px;">
            </view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ ability.special_attack }}</view>
          </view>
          <view class="tn-flex align-center">
            <view class="tn-p-sm flex justify-center flex-sub">特防</view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ current.sp_def }}</view>
            <view class="flex justify-center flex-sub">
              <input @blur="checkStudy('special_defense')" v-model.number="studyRecord.special_defense" type="number"
                     style="border: 1px solid #fff; padding: 0 5px;border-radius: 5px;">
            </view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ ability.special_defense }}</view>
          </view>
          <view class="tn-flex align-center">
            <view class="tn-p-sm flex justify-center flex-sub">速度</view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ current.spd }}</view>
            <view class="flex justify-center flex-sub">
              <input @blur="checkStudy('speed')" v-model.number="studyRecord.speed" type="number"
                     style="border: 1px solid #fff; padding: 0 5px;border-radius: 5px;">
            </view>
            <view class="tn-p-sm flex justify-center flex-sub">{{ ability.speed }}</view>
          </view>
          <view class="tn-flex align-center text-bold">
            <view class="tn-p-sm flex justify-center flex-sub">总和:</view>
            <view class="tn-p-sm flex justify-center flex-sub">
              {{ calcRace(current.hp, current.atk, current.def, current.sp_atk, current.sp_def, current.spd) }}
            </view>
            <view class="flex justify-center flex-sub">
              <input @blur="checkStudy('speed')" :value="510 - residueStudy" disabled>
            </view>
            <view class="tn-p-sm flex justify-center flex-sub">
              {{ ability.hp + ability.atk + ability.des + ability.special_attack + ability.special_defense + ability.speed }}
            </view>
          </view>
        </view>
      </view>
      <view class="border-left border-bottom border-right tn-blue-light_bg text-red text-bold"
            style="border-radius: 0 0 15rpx 15rpx;">
        <view class="tn-p-sm">
          <text>使用方法</text>
          <view>① 输入等级：默认精灵等级100级。修改等级可计算对应等级的能力值。</view>
          <view>② 输入个体值：输入精灵的个体值（不超过31）。</view>
          <view>③ 输入学习力：输入精灵的学习力。（每项学习力不超过255，六项总和不超过510）</view>
          <view>④ 选择性格：选择你要计算的精灵性格。</view>
          <view>⑤ 选择年费：是否开启了尊贵的年费nono。</view>
          <view>⑥ 选择称号：勾选称号选择框后，点击选择称号按钮跳转到称号页面，点击对应的称号即可。</view>
          <view>⑦ 选择刻印：勾选刻印选择框后，点击选择刻印按钮跳转到刻印页面，选择指定的刻印即可。</view>
          <view>⑧ 选择战队：勾选战队选择框后，能力值默认提升全部战队加成。</view>
          <view>⑨ 选择套装：勾选套装选择框后，点击选择套装按钮跳转到套装页面，选择指定的套装即可。</view>
          <view>⑩ 选择面部：勾选面部选择框后，点击选择面部按钮跳转到目镜页面，选择指定的目镜即可。</view>
          <view>⑪ 如果套装包含目镜，选择目镜后，套装的加成将会失效。</view>
          <view>⑫ 精灵如果有强化/神谕/觉醒, 会默认用强化/神谕/觉醒后的能力值进行计算。</view>
          <view>⑬ 自动计算该精灵的能力值。</view>
        </view>
      </view>
    </view>
    <loading-page :show="showLoading" @click.stop=""/>
    <view class="cu-modal" :class=" showPopup ? 'show' : ''" @click="showPopup = false">
      <view class="cu-dialog tn-text-left" @click.stop="" style="background-color: #182f4d;width: 95%">
        <view class="flex margin-xs" style="margin-bottom: 0;position: sticky;top: 0">
          <view style="width: 75px;background-color: #21365a"></view>
          <view class="flex" style="width: calc(100% - 75px);height: 30px;background-color: #21365a;color: #b7cdfe;">
            <view style="width: 20%;text-align: center;line-height: 30px">
              攻击
            </view>
            <view style="width: 20%;text-align: center;line-height: 30px">
              防御
            </view>
            <view style="width: 20%;text-align: center;line-height: 30px">
              特攻
            </view>
            <view style="width: 20%;text-align: center;line-height: 30px">
              特防
            </view>
            <view style="width: 20%;text-align: center;line-height: 30px">
              速度
            </view>
          </view>
        </view>
        <scroll-view scroll-y style="height: 500px; padding-bottom: 10rpx">
          <view v-for="(item, index) in popupData" class="flex margin-xs">
            <view style="width: 25px;background-color: #21365a;text-align: center;color: #b7cdfe"
                  class="flex flex-wrap justify-center align-center">
              <view>
                <image src="/static/title.png" style="width: 10px;height: 10px"/>
                {{ index }}
              </view>
            </view>
            <view style="width: calc(100% - 25px);">
              <view
                  class="flex"
                  v-for="v in item"
                  :key="v.id"
                  style="width: 100%;height: 30px;background-color: #21365a;color: #b7cdfe;"
                  @click="chooseCharacter(v)"
              >
                <view style="width: 50px;text-align: center;line-height: 30px">
                  {{ v.name }}
                </view>
                <view class="flex" style="width: calc(100% - 50px);height: 30px;background-color: #21365a;color: #b7cdfe;">
                  <view style="width: 20%;text-align: center;line-height: 30px">
                    <template v-if="v.atk > 1">
                      <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                    </template>
                    <template v-else-if="v.atk === 1">
                      <TnIcon name="reduce" color="#77a3db"></TnIcon>
                    </template>
                    <template v-else-if="v.atk < 1">
                      <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                    </template>
                  </view>
                  <view style="width: 20%;text-align: center;line-height: 30px">
                    <template v-if="v.des > 1">
                      <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                    </template>
                    <template v-else-if="v.des === 1">
                      <TnIcon name="reduce" color="#77a3db"></TnIcon>
                    </template>
                    <template v-else-if="v.des < 1">
                      <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                    </template>
                  </view>
                  <view style="width: 20%;text-align: center;line-height: 30px">
                    <template v-if="v.special_attack > 1">
                      <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                    </template>
                    <template v-else-if="v.special_attack === 1">
                      <TnIcon name="reduce" color="#77a3db"></TnIcon>
                    </template>
                    <template v-else-if="v.special_attack < 1">
                      <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                    </template>
                  </view>
                  <view style="width: 20%;text-align: center;line-height: 30px">
                    <template v-if="v.special_defense > 1">
                      <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                    </template>
                    <template v-else-if="v.special_defense === 1">
                      <TnIcon name="reduce" color="#77a3db"></TnIcon>
                    </template>
                    <template v-else-if="v.special_defense < 1">
                      <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                    </template>
                  </view>
                  <view style="width: 20%;text-align: center;line-height: 30px">
                    <template v-if="v.speed > 1">
                      <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                    </template>
                    <template v-else-if="v.speed === 1">
                      <TnIcon name="reduce" color="#77a3db"></TnIcon>
                    </template>
                    <template v-else-if="v.speed < 1">
                      <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                    </template>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import TnIcon from "@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue";
  import TnNavbar from "@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import TnCheckbox from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox.vue'
  import {ref, reactive, getCurrentInstance, computed} from 'vue'
  import {onLoad} from '@dcloudio/uni-app'
  import {useUniAppSystemRectInfo} from "@/uni_modules/tuniaoui-vue3/hooks/use-uniapp-system-rect-info";
  import LoadingPage from "@/components/loadingPage.vue";
  import {onShareAppMessage} from '@dcloudio/uni-app'
  import {calcRace} from "../../utils/utils";

  onShareAppMessage(() => {
    return {
      title: '精灵能力计算器',
      imageUrl: 'https://seerforwdw.info/seer-image/diduo.jpg',
      path: '/pagesA/ability-calc/ability-calc'
    }
  })

  const {
    proxy
  } = getCurrentInstance()

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  // 初始数据
  const showLoading = ref(false)
  const list = ref([])
  const totalPages = ref(0)
  // 分页数据
  const where = reactive({
    page: 1,
    limit: 60,
    def_name: '',
    sort: 'id',
    order: 'desc'
  })

  const getList = async () => {
    showLoading.value = true;
    if (where.page === 1) {
      ({records: list.value, pages: totalPages.value} = await proxy.$api.getMonsterQuery(where))
    } else {
      const {records} = await proxy.$api.getMonsterQuery(where)
      list.value.push(...records)
    }
    current.value = list.value[0]
    changeElf(current.value)
    showLoading.value = false
  }

  // 搜索
  const search = async () => {
    where.page = 1
    await getList()
  }

  const status = computed(() => {
    if (showLoading.value) {
      return 'loading'
    } else if (where.page < totalPages.value) {
      return 'loadmore'
    } else {
      return 'nomore'
    }
  })

  // 触底触发
  const loadMore = async () => {
    if (status.value === 'loading') return
    if (status.value === 'loadmore') {
      where.page++
      await getList()
    } else {
      showLoading.value = false
    }
  }

  // 获取精灵详情
  const current = ref(null)

  // 表单数据
  const form = ref({
    lv: 100,
    talent: 31,
    character: {}
  })

  // 获取精灵性格
  const character = ref([])
  const getCharacter = async () => {
    character.value = await proxy.$api.getCharacterList()
    character.value.forEach(item => {
      if (item.atk > 1) {
        popupData.value["攻击型"].push(item)
      }
      if (item.des > 1) {
        popupData.value["防御型"].push(item)
      }
      if (item.special_attack > 1) {
        popupData.value["特攻型"].push(item)
      }
      if (item.special_defense > 1) {
        popupData.value["特防型"].push(item)
      }
      if (item.speed > 1) {
        popupData.value["速度型"].push(item)
      }
      if (item.atk === 1 && item.des === 1 && item.special_attack === 1 && item.special_defense === 1 && item.speed === 1) {
        popupData.value["平衡型"].push(item)
      }
    })
    if (!from.value) form.value.character = character.value[0]
  }

  const changeElf = (item) => {
    current.value = item
    if(current.value && current.value.new_race) {
      const arr = current.value.new_race.split(' ')
      current.value.hp = arr[0] * 1
      current.value.atk = arr[1] * 1
      current.value.def = arr[2] * 1
      current.value.sp_atk = arr[3] * 1
      current.value.sp_def = arr[4] * 1
      current.value.spd = arr[5] * 1
    }
  }

  const showPopup = ref(false)

  const popupData = ref({
    "攻击型": [],
    "防御型": [],
    "特攻型": [],
    "特防型": [],
    "速度型": [],
    "平衡型": []
  })

  // 选择性格
  const chooseCharacter = (item) => {
    form.value.character = item
    showPopup.value = false
  }

  // 各学习力
  const studyRecord = ref({
    hp: 0,
    atk: 0,
    des: 0,
    special_attack: 0,
    special_defense: 0,
    speed: 0
  })

  // 校验学习力
  const checkStudy = (type) => {
    if (studyRecord.value[type] > 255) studyRecord.value[type] = 255
    let sum = 0
    for (let key in studyRecord.value) {
      sum += studyRecord.value[key]
    }
    if (sum > 510) {
      studyRecord.value[type] = studyRecord.value[type] - (sum - 510)
    }
    return 510 - sum
  }

  // 剩余学习力
  const residueStudy = computed(() => {
    let sum = 0
    for (let key in studyRecord.value) {
      sum = sum + studyRecord.value[key]
    }
    return 510 - sum
  })

  // 是否年费
  const isYear = ref(false)
  // 是否称号
  const isAchievement = ref(false)
  // 是否刻印
  const isMintmark = ref(false)
  // 是否战队
  const isTeam = ref(false)
  // 是否套装
  const isSuit = ref(false)
  // 是否部件
  const isSpareParts = ref(false)
  // 是否体力加成
  const isPower = ref(true)

  // 选择称号
  const achievement = ref(null)
  const chooseAchievement = () => {
    uni.navigateTo({
      url: '/pages/achievement/achievement?from=calc'
    })
  }

  // 选择刻印
  const mintmark = ref(null)
  const chooseMintmark = () => {
    uni.navigateTo({
      url: '/pagesA/mintmark/mintmark?data=' + JSON.stringify(mintmark.value || [])
    })
  }

  // 刻印数值和
  const mintmarkSum = computed(() => {
    const atk = mintmark.value.reduce((pre, cur) => {
      return pre + (cur.real_atk || 0)
    }, 0)
    const def = mintmark.value.reduce((pre, cur) => {
      return pre + (cur.real_def || 0)
    }, 0)
    const sp_atk = mintmark.value.reduce((pre, cur) => {
      return pre + (cur.real_sp_atk || 0)
    }, 0)
    const sp_def = mintmark.value.reduce((pre, cur) => {
      return pre + (cur.real_sp_def || 0)
    }, 0)
    const speed = mintmark.value.reduce((pre, cur) => {
      return pre + (cur.real_speed || 0)
    }, 0)
    const hp = mintmark.value.reduce((pre, cur) => {
      return pre + (cur.real_power || 0)
    }, 0)
    return {atk, def, sp_atk, sp_def, speed, hp}
  })

  // 选择套装
  const suit = ref(null)
  const chooseSuit = () => {
    if (spareParts.value) {
      uni.showModal({
        title: '赛佬~',
        content: '你已经装备了目镜,再选择带有目镜的套装后,套装效果不会生效哦~',
        success: res => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pagesA/suit/suit'
            })
          }
        }
      })
    } else {
      uni.navigateTo({
        url: '/pagesA/suit/suit'
      })
    }
  }

  // 套装数值和
  const suitSum = computed(() => {
    let atk = 0
    let def = 0
    let sp_atk = 0
    let sp_def = 0
    let speed = 0
    let hp = 0
    if (suit.value.spare_part) {
      const arr = suit.value.spare_part[0].ability.split(' ')
      atk = Number(arr[0])
      def = Number(arr[1])
      sp_atk = Number(arr[2])
      sp_def = Number(arr[3])
      speed = Number(arr[4])
      hp = Number(arr[5])
    }

    return {atk, def, sp_atk, sp_def, speed, hp}
  })

  // 选择部件
  const spareParts = ref(null)
  const chooseSpareParts = () => {
    if (suit.value && suit.value.spare_part && suit.value.spare_part.length === 5) {
      uni.showModal({
        title: '赛佬~',
        content: '你已经选择了带有目镜的套装了哦~再选择目镜的话,套装效果将不会生效哦~',
        success: res => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pagesA/spare-parts/spare-parts'
            })
          }
        }
      })
    } else {
      uni.navigateTo({
        url: '/pagesA/spare-parts/spare-parts'
      })
    }
  }

  // 能力值
  const ability = computed(() => {
    let hp = 0, atk = 0, des = 0, special_attack = 0, special_defense = 0, speed = 0
    hp = parseInt(((current.value.hp * 2 + form.value.talent + studyRecord.value.hp / 4) * (form.value.lv / 100) + 10) +
        form.value.lv)
    atk =
        parseInt(((current.value.atk * 2 + form.value.talent + studyRecord.value.atk / 4) * (form.value.lv / 100) + 5) *
            form.value.character.atk)
    des = parseInt(((current.value.def * 2 + form.value.talent + studyRecord.value.des / 4) * (form.value.lv / 100) + 5) *
        form.value.character.des)
    special_attack = parseInt(((current.value.sp_atk * 2 + form.value.talent + studyRecord.value.special_attack / 4) *
        (form.value.lv / 100) + 5) * form.value.character.special_attack)
    special_defense = parseInt(((current.value.sp_def * 2 + form.value.talent + studyRecord.value.special_defense / 4) *
        (form.value.lv / 100) +
        5) * form.value.character.special_defense)
    speed = parseInt(((current.value.spd * 2 + form.value.talent + studyRecord.value.speed / 4) * (form.value.lv / 100)
        + 5) * form.value.character.speed)

    if(isPower.value) {
      hp += 20
    }

    if (isYear.value) {
      hp += 10
      atk += 10
      des += 10
      special_attack += 10
      special_defense += 10
      speed += 10
    }
    if (isTeam.value) {
      hp += 30
      atk += 15
      des += 15
      special_attack += 15
      special_defense += 15
      speed += 10
    }
    if (achievement.value && isAchievement.value) {
      hp += achievement.value.hp
      atk += achievement.value.atk
      des += achievement.value.def
      special_attack += achievement.value.sp_atk
      special_defense += achievement.value.sp_def
      speed += achievement.value.speed
    }
    if (mintmark.value && isMintmark.value) {
      hp += mintmark.value.reduce((pre, cur) => {
        return pre + (cur.real_power || 0)
      }, 0)
      atk += mintmark.value.reduce((pre, cur) => {
        return pre + (cur.real_atk || 0)
      }, 0)
      des += mintmark.value.reduce((pre, cur) => {
        return pre + (cur.real_def || 0)
      }, 0)
      special_attack += mintmark.value.reduce((pre, cur) => {
        return pre + (cur.real_sp_atk || 0)
      }, 0)
      special_defense += mintmark.value.reduce((pre, cur) => {
        return pre + (cur.real_sp_def || 0)
      }, 0)
      speed += mintmark.value.reduce((pre, cur) => {
        return pre + (cur.real_speed || 0)
      }, 0)
    }

    if (spareParts.value && isSpareParts.value) {
      const arr = spareParts.value.ability.split(' ')
      if (spareParts.value.is_percent === 1) {
        hp = parseInt(hp * (1 + arr[5] / 100))
        atk = parseInt(atk * (1 + arr[0] / 100))
        des = parseInt(des * (1 + arr[1] / 100))
        special_attack = parseInt(special_attack * (1 + arr[2] / 100))
        special_defense = parseInt(special_defense * (1 + arr[3] / 100))
        speed = parseInt(speed * (1 + arr[4] / 100))
      } else {
        hp += Number(arr[5])
        atk += Number(arr[0])
        des += Number(arr[1])
        special_attack += Number(arr[2])
        special_defense += Number(arr[3])
        speed += Number(arr[4])
      }
    }

    if (suit.value && isSuit.value && suit.value.spare_part) {
      if (!(suit.value.spare_part.length === 5 && spareParts.value && isSpareParts.value)) {
        if (suit.value.spare_part[0].is_percent === 1) {
          hp = parseInt(hp * (1 + suitSum.value.hp / 100))
          atk = parseInt(atk * (1 + suitSum.value.atk / 100))
          des = parseInt(des * (1 + suitSum.value.def / 100))
          special_attack = parseInt(special_attack * (1 + suitSum.value.sp_atk / 100))
          special_defense = parseInt(special_defense * (1 + suitSum.value.sp_def / 100))
          speed = parseInt(speed * (1 + suitSum.value.speed / 100))
        } else {
          hp += suitSum.value.hp
          atk += suitSum.value.atk
          des += suitSum.value.def
          special_attack += suitSum.value.sp_atk
          special_defense += suitSum.value.sp_def
          speed += suitSum.value.hp
        }
      }
    }

    return {
      hp, atk, des, special_attack, special_defense, speed
    }
  })

  const from = ref('')

  // 保存
  const save = () => {
    uni.navigateBack()
    uni.$emit('getCalcData', {
      from: from.value,
      form: form.value,
      ability: ability.value,
      isTeam: isTeam.value,
      isYear: isYear.value,
      mintmark: mintmark.value,
      isMintmark: isMintmark.value,
      achievement: achievement.value,
      isAchievement: isAchievement.value,
      monster: current.value
    })
  }

  onLoad(async (res) => {
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
    uni.$on('getAchievement', (data) => {
      achievement.value = data
      isAchievement.value = true
    })
    uni.$on('finishMintmarkSelect', (data) => {
      let result = data.every(item => Object.keys(item).length === 0)
      if (result) {
        mintmark.value = null
      } else {
        mintmark.value = data
        isMintmark.value = true
      }
    })
    uni.$on('finishSuitSelect', (data) => {
      suit.value = data
      isSuit.value = true
    })
    uni.$on('finishSparePartsSelect', (data) => {
      spareParts.value = data
      isSpareParts.value = true
    })
    if (res.from) from.value = res.from
    if (res.name) {
      where.def_name = res.name
      const monster = JSON.parse(res.monster)
      form.value.talent = monster.talent
      form.value.lv = monster.level
      Object.assign(form.value.character, monster.character)
      isTeam.value = monster.isTeam
      isYear.value = monster.isYear
      mintmark.value = monster.mintmark
      isMintmark.value = monster.isMintmark
      achievement.value = monster.achievement
      isAchievement.value = monster.isAchievement
      studyRecord.value.hp = monster.hp
      studyRecord.value.atk = monster.atk
      studyRecord.value.des = monster.def
      studyRecord.value.special_attack = monster.sp_atk
      studyRecord.value.special_defense = monster.sp_def
      studyRecord.value.speed = monster.spd
    }
    await getList()
    await getCharacter()
  })
</script>


<style scoped lang="scss">
  :deep(.input-placeholder) {
    color: #fff !important;
  }

  :deep(.tn-checkbox__checked-box--square) {
    border: 1px solid #aaa;
  }

  /* 移动背景部分 start*/
  .bg-contaniner {
    position: fixed;
    top: -0rpx;
    left: -300rpx;
    --text-color: hsl(0 95% 60%);
    --bg-color: hsl(0 0% 100%);
    --bg-size: 200px;
    height: 100%;
    display: grid;
    place-items: center;
    place-content: center;
    overflow: hidden;
    background-color: var(--bg-color);
    z-index: -1;
  }

  .bg-contaniner::before {
    --size: 150vmax;
    content: "";
    inline-size: var(--size);
    block-size: var(--size);
    background-image: url("https://resource.tuniaokj.com/images/animate/animate3.png");
    background-size: var(--bg-size);
    background-repeat: repeat;
    transform: rotate(45deg);
    opacity: 0.25;
    animation: bg 6s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .bg-contaniner::before {
      animation-duration: 0s;
    }
  }

  @keyframes bg {
    to {
      background-position: 0 calc(var(--bg-size) * -1);
    }
  }

  /* 移动背景部分 end*/
  .scroll-Y {
    height: 300rpx;
  }

  .scroll-view_H {
    white-space: nowrap;
    width: 100%;
  }

  .scroll-view-item {
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    font-size: 36rpx;
  }

  .scroll-view-item_H {
    display: inline-block;
    width: 100%;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    font-size: 36rpx;
  }

  .list-border-left + .list-border-left {
    border-left: 1px solid #eee;
  }

  .border {
    &-left {
      border-left: 1px solid #eee;
    }

    &-right {
      border-right: 1px solid #eee;
    }

    &-top {
      border-top: 1px solid #eee;
    }

    &-bottom {
      border-bottom: 1px solid #eee;
    }

    &-all {
      border: 1px solid #eee;
    }
  }

  .tag {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
    transition: all 0.3s ease-in-out;
    border: 1px solid #3d7eff;
  }

  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
</style>
